<template>
  <el-card style="margin:10px">
    <!-- 1.搜索 -->
    <el-form
      :inline="true"
      :model="requestDirectorys"
      ref="requestDirectorys"
      class="head"
    >
      <!-- 目录名称 -->
      <el-form-item label="目录名称" prop="directoryName">
        <el-input
          class="filter-item"
          style="width: 200px"
          v-model="requestDirectorys.directoryName"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <!-- 状态 -->
      <el-form-item label="状态" prop="state" class="state">
        <el-select
          style="width: 200px"
          v-model="requestDirectorys.state"
          placeholder="请选择"
        >
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- 清除按钮  -->
        <el-button @click="onClear" size="small">清除</el-button>

        <!-- 搜索按钮 -->
        <el-button type="primary" @click="onFind" size="small">搜索</el-button>
      </el-form-item>

      <!-- 2.新增目录按钮 -->
      <el-form-item>
        <el-button
          size="small"
          @click="handleChange('add')"
          type="success"
          icon="el-icon-edit"
          >新增用户</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 3.警示栏 -->
    <el-alert v-if="alertText !== ''" :title="alertText" type="info" show-icon>
    </el-alert>
    <!-- 4.目录 -->
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column prop="subjectName" label="所属学科" width="140" />
      <el-table-column prop="directoryName" label="目录名称" width="140" />
      <el-table-column prop="username" label="创建者" width="140" />
      <el-table-column prop="addDate" label="创建日期" width="140">
      </el-table-column>
      <el-table-column prop="totals" label="面试题数量" width="140" />
      <el-table-column prop="state" label="状态" width="140">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 1">已启用</span>
          <span v-else>已禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template v-slot="{ row }">
          <el-button type="text" size="small" @click="stateClick(row)">
            <span v-if="row.state === 0">启用</span>
            <span v-else>禁用</span>
          </el-button>
          <el-button
            type="text"
            @click="handleChange(row.id)"
            size="small"
            :disabled="row.state === 0"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="row.state === 0"
            @click="deleteDirectorys(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 6.分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="10"
      layout=" prev, pager, next,sizes, jumper"
      :page-sizes="[10, 20, 30]"
      :total="Number(total)"
      class="pagination"
    >
    </el-pagination>
    <!-- 5.新增弹窗 -->
    <DirectorysAdd
      ref="addDirectory"
      :textInfo="textInfo"
      @newFormData="getList()"
      :formInfo="formDate"
    ></DirectorysAdd>
  </el-card>
</template>

<script>
import { status } from '@/api/hmmm/constants.js'
import { list, changeState, remove, detail } from '@/api/hmmm/directorys.js'
import DirectorysAdd from '@/module-hmmm/components/directorys-add.vue'
export default {
  data () {
    return {
      requestDirectorys: {
        page: 1,
        pagesize: 10
      },
      list: [],
      total: undefined,
      textInfo: {
        pageTitle: '用户',
        text: ''
      },
      stateInfo: undefined,
      formDate: {
        subjectID: undefined,
        directoryName: undefined
      },
      alertText: ''
    }
  },
  created () {
    this.getList()
  },
  computed: {
    status () {
      return status
    }
  },
  components: {
    DirectorysAdd
  },
  methods: {
    // 获取目录信息
    async getList () {
      const { data, data: { items } } = await list(this.requestDirectorys)
      console.log(data)
      this.list = items
      this.total = data.counts
      this.alertText = `共 ${this.total} 条记录`
    },
    // 1.搜索-清除事件
    onClear () {
      this.$refs.requestDirectorys.resetFields()
    },
    // 1.搜索-搜索事件
    onFind () {
      this.requestDirectorys.page = 1
      this.getList(this.requestDirectorys)
    },
    // 新增,查看按钮之后表单清空
    query () {
      this.formDate = {
        subjectID: '',
        directoryName: ''
      }
    },
    // 2.新增,查看按钮
    handleChange (id) {
      this.$refs.addDirectory.dialogFormV()
      this.query()
      if (id === 'add') {
        this.textInfo.text = '新增目录'
      } else {
        this.textInfo.text = '修改目录'
        this.adddate(id)
      }
    },
    // 信息编辑
    async adddate (id) {
      this.formDate.id = id
      const { data } = await detail({ id })
      console.log(data)
      this.formDate = data
    },
    // 点击启用禁用按钮
    async stateClick (date) {
      // 判断state是什么状态
      if (date.state === 1) {
        this.stateInfo = 0
      } else {
        this.stateInfo = 1
      }
      await changeState({ id: date.id, state: this.stateInfo })
      this.getList()
    },
    // 点击删除按钮
    deleteDirectorys (date) {
      this.$confirm('提示', '此操作将永久删除该目录, 是否继续?', {
        type: 'warning'
      }).then(async () => {
        await remove({ id: date.id })
          .then(response => {
            this.$message.success('成功删除了目录')
            this.list.splice(date.id, 1)
            this.getList()
          })
      }).catch(() => {
        this.$message.info('已取消操作!')
      })
      this.getList()
    },
    // 6.改变页码
    handleCurrentChange (val) {
      this.requestDirectorys.page = val
      this.getList()
    },
    // 6.一页展示数据量
    handleSizeChange (val) {
      this.requestDirectorys.pagesize = val
      this.getList()
    }
  }
}
</script>

<style >
.head {
  display: flex;
  justify-content: space-between;
}
.el-button--small{
  margin-left: 10px;
}
.state{
  margin-left: -200px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
